<!--
 * @Author: 杨光辉_GerhardYang
 * @Date: 2021-02-19 11:40:18
 * @LastEditors: 杨光辉(GerhardYang)
 * @LastEditTime: 2021-08-09 09:18:28
 * @Description: file content
-->
<template>
  <div id="tools-menu">
    <div>
      <div style="display: inline-block">工具条显示/隐藏</div>
      <a-switch
        style="width: 40px; margin-left: 20px"
        default-checked
        @change="onChange"
      />
    </div>
    <div class="tools-items" v-if="false">
      <a-menu slot="overlay" v-model="current" @click="handleMenuClick">
        <a-menu-item key="measure"> <a-icon type="control" />测量 </a-menu-item>
        <a-menu-item key="mark"> <a-icon type="edit" />标注 </a-menu-item>
        <a-menu-item key="xyto">
          <a-icon type="environment" />坐标定位
        </a-menu-item>
        <a-menu-item key="compare" style="display: none">
          <a-icon type="interaction" />对比
        </a-menu-item>
      </a-menu>
    </div>
    <a-divider v-if="false" />
    <div class="tool-details" v-if="false">
      <XYto v-if="isXYto" :map-xyz="xyz" />
      <Meaure v-show="isMeaure" />
      <Mark ref="Mark" />
    </div>
  </div>
</template>

<script>
import XYto from "./XYto";
import Meaure from "./Meaure";
import Mark from "./Mark.vue";
export default {
  data() {
    return {
      isXYto: false,
      isMeaure: true,
      current: ["measure"],
      hasTool: true,
      xyz: {},
      ismark: false,
    };
  },
  computed: {
    map() {
      return this.$store.state.map;
    },
    isShowTools() {
      return this.$store.state.isShowTools;
    },
  },
  components: {
    XYto,
    Meaure,
    Mark,
  },
  methods: {
    onChange() {
      this.isShowTools
        ? this.$store.commit("setisShowTools", false)
        : this.$store.commit("setisShowTools", true);
    },
    mark() {
      let self = this;
      this.$message.info("单击地图左键，添加标记，可拖动标记");
      this.map.on("click", function (e) {
        self.$refs.Mark.addmarkerToMap(e.latlng);
      });
    },
    handleMenuClick(event) {
      if (event.key == "xyto") {
        this.hasTool = true;
        this.closeAll();
        this.showXYto();
      } else if (event.key == "measure") {
        this.hasTool = true;
        this.closeAll();
        this.isMeaure = true;
      } else if (event.key == "mark") {
        this.closeAll();
        this.hasTool = false;
        this.mark();
      } else if (event.key == "compare") {
        this.closeAll();
        this.hasTool = false;
      }
    },
    closeAll() {
      this.isXYto = false;
      this.isMeaure = false;
      this.ismark = false;
      this.map.off("click");
    },
    showmark() {
      this.ismark = true;
    },
    // 打开坐标定位菜单
    showXYto() {
      this.isXYto = true;
      this.xyz.center = [
        this.map.getCenter().lat.toFixed(3),
        this.map.getCenter().lng.toFixed(3),
      ];
      this.xyz.zoom = this.map.getZoom();
    },
  },
};
</script>

<style lang="less" scoped>
#tools-menu {
  border: none;
}

/deep/.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  border-right: none;
}
.tool-details {
  border: 2px solid @themeBackgroundColor;
  border-radius: 10px;
}
</style>
